<template>
  <view>
    <view class="list">

      <view class="item" v-for="(item,i) in list" :key="i" @click="handleShopClick(item)">
        <image class="cover" :src="item.cover"></image>
        <view class="right">
          <view class="name text-cut2">{{ item.comName }}</view>
          <starts read-only :value="item.score"/>
          <view class="desc">{{ item.address }}</view>
          <view class="sells">
            <view class="tag">已销售{{ item.serviceCount }}</view>
          </view>
        </view>
      </view>

      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>

    </view>
  </view>
</template>

<script>
import Starts from "@/components/stars";
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";
import ListLoadOver from "@/components/list/loadOver";
import Api from "@/utils/Api";

export default {
  name: "shop-favor",
  components: {ListLoadOver, ListEmpty, ListLoading, Starts},
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.getList();
  },
  methods: {
    handleShopClick(item) {
      uni.navigateTo({url: `/pages/shop/index/index?id=${item.comId}`})
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getCollectStoreList(++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
  },
  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>

.list {
  padding-bottom: env(safe-area-inset-bottom);

  .item {
    display: flex;
    padding: r(48px 35px);
    background-color: white;

    & + .item {
      margin-top: 1px;
    }

    .cover {
      height: r(200px);
      width: r(200px);
      margin-right: r(30px);
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;

      .name {
        font-size: r(28px);
        color: #333333;
      }

      .desc {
        font-size: r(24px);
        color: #999999;
      }

      .sells {
        display: flex;

        .tag {
          background: rgba(#E73832, 0.12);
          border-radius: r(4px);
          font-size: r(20px);
          color: #E73832;
          padding: r(4px 12px);
          margin-right: r(20px);
        }
      }
    }
  }
}
</style>